/* 
以前 没有hooks的时候 只有类组件拥有状态 
 */
import React, { Component } from "react";
function withMouse(Com) {
  // const NewCom = () => <Com x={x} y={y} />;
  class NewCom extends Component {
    state = {
      x: 0,
      y: 0,
    };
    componentDidMount() {
      document.body.addEventListener("mousemove", (ev) => {
        this.setState({ x: ev.clientX, y: ev.clientY });
      });
    }
    render() {
      return <Com x={this.state.x} y={this.state.y} />;
    }
  }

  return NewCom;
}

function Main(props) {
  return (
    <div style={{ height: "100vh", backgroundColor: "aqua" }}>
      {" "}
      x : {props.x} y : {props.y}
    </div>
  );
}

const NewMain = withMouse(Main);

export default function App() {
  return (
    <div>
      <NewMain></NewMain>
    </div>
  );
}
